
// export const overlayFun = (BMap:any) => { 
//   class SquareOverlay extends BMap.Overlay {
//       _center;
//       _divdom;
//       _domBoolean;
//       constructor(center:any, size:any, divdom:any, domBoolean = false) {
//         super()
//         this._center = center;
//         this._size = size;
//         this._divdom = divdom;
//         this.markDiv = document.createElement("div")
//         this._domBoolean = domBoolean
//       }
//       initialize(map:any) {
//         // 保存map对象实例  
//         this.map = map;
//         let div = document.createElement("div");
//         div.style.position = "absolute";
//         div.style.display = "none";

//         if (typeof this._divdom == 'string') {
//           let dom_ = document.createElement("div")
//           // 创建div元素，作为自定义覆盖物的容器  
//           dom_.innerHTML = this._divdom;
//           this.markDiv.append(dom_)
          
//         } else {
//           this.markDiv.append(this._divdom)
//         }
        
//         div.append(this.markDiv)

//         // 将div添加到覆盖物容器中  
//         map.getPanes().markerPane.appendChild(div);
//         // 保存div实例  
//         this.div = div;
//         // 需要将div元素作为方法的返回值，当调用该覆盖物的show、  
//         // hide方法，或者对覆盖物进行移除时，API都将操作此元素。  
//         return div;
//       }
//       draw() {
//         // 根据地理坐标转换为像素坐标，并设置给容器 
//         let position = this.map.pointToOverlayPixel(this._center);
//         this.div.style.left = position.x - this._size.x / 2 + "px";
        
//         this.show();
//       }
//       show() {
//         if (this.div) {
//           this.div.style.display = "block";
//         }
//       }
//       hide() {
//         if (this.div) {
//           this.div.style.display = "none";
//         }
//       }
//       addEventListener(event:any, fun:any) {
//         this.div['on' + event] = fun;
//       }
//       changeMarkContent(content:any){
//         if (typeof this._divdom == 'string') {
//           // 创建div元素，作为自定义覆盖物的容器  
//           this.markDiv.innerHTML = '';
//         } else {
//           this._divdom.remove()
//         }
//         if (typeof content == 'string') {
//           // 创建div元素，作为自定义覆盖物的容器  
//           this.markDiv.innerHTML = content;
//         } else {
//           this.markDiv.append(content)
//         }
//         this._divdom = content
//       }
//   }

//   return SquareOverlay
// }

export const overlayFun = (BMap:any) => { 
  class SquareOverlay extends BMap.Overlay{
  public _center: any;
  public _divdom: any;
  public _domBoolean: Boolean;
  constructor(center: any, length: any, divdom: any, domBoolean: Boolean = false) {
    super()
    this._center = center;
    this._length = length;
    this._divdom = divdom;
    this._domBoolean = domBoolean
    this.markDiv = document.createElement("div")


  }
  public initialize(map: any) {
    // 保存map对象实例  
    this._map = map;
    let div = document.createElement("div");
    div.style.position = "absolute";
    if (!this._domBoolean) {
      // 创建div元素，作为自定义覆盖物的容器  
      
      this.markDiv.innerHTML = this._divdom;
    } else {
      this.markDiv.append(this._divdom)
    }
    div.append(this.markDiv)
    // 将div添加到覆盖物容器中  
    map.getPanes().markerPane.appendChild(div);
    // 保存div实例  
    this._div = div;
    // 需要将div元素作为方法的返回值，当调用该覆盖物的show、  
    // hide方法，或者对覆盖物进行移除时，API都将操作此元素。  
    return div;
  }
  public draw() {
    // 根据地理坐标转换为像素坐标，并设置给容器 
    var position = this._map.pointToOverlayPixel(this._center);
    this._div.style.left = position.x - this._length.x / 2 + "px";
    this._div.style.top = position.y - this._length.y / 2 + "px";
  }
  public show() {
    if (this._div) {
      this._div.style.display = "";
    }
  }
  public hide() {
    if (this._div) {
      this._div.style.display = "none";
    }
  }
  public addEventListener(event: any, fun: any) {
    this._div['on' + event] = fun;
  }
  public changeMarkContent(content:any){
    if (typeof this._divdom == 'string') {
      // 创建div元素，作为自定义覆盖物的容器  
      this.markDiv.innerHTML = '';
    } else {
      this._divdom.remove()
    }
    if (typeof content == 'string') {
      // 创建div元素，作为自定义覆盖物的容器  
      this.markDiv.innerHTML = content;
    } else {
      this.markDiv.append(content)
    }
    this._divdom = content
  }
}

return SquareOverlay
}


// 谷歌地图OverlayView
export const googleOverlayFun = (google:any) => { 

  class SquareOverlay extends google.maps.OverlayView {

    constructor(point:any, size:any, markerContent:any, infoDom:any, domBoolean = false) {
      super()
      this.point = point;
      this.size = size;
      this.domBoolean = domBoolean;

      // 创建自定义图层的dom元素的父元素
      this.div = document.createElement("div")
      this.div.style.position = "absolute";
      

      // marker父元素
      this.markerDiv = document.createElement("div")

      // 信息框div
      this.infoDiv = null
      this.infoDivCon = null
      
      // 信息框dom字符串
      this.infoDom = infoDom
      this.isDomInfo = typeof infoDom == 'string' ? false : true
      this.isInfoCreated = false
      // marker内容
      this.markerContent = markerContent
    }

    // 创建信息框
    initInfo(){
      if(!this.infoDom) return;
      // 信息框内容
      this.infoDiv = document.createElement("div")
      this.infoDiv.style.position = 'absolute'
      this.infoDiv.style.left = '50%'
      const { y =0 } = this.size
      this.infoDiv.style.top = `-${y/2}px`
      this.infoDiv.style.transform = 'translate(-50%,-100%)';
      this.infoDiv.style.display = 'none';
      this.infoDiv.style.zIndex = 9;
      this.infoDiv.id = 'test-map-info'
      this.infoDivCon = document.createElement("div")
      this.infoDiv.append(this.infoDivCon)
      if(!this.isDomInfo){
        this.infoDiv.innerHTML = this.infoDom
      }else{
        this.infoDivCon.append(this.infoDom)
      }
      
    }

    // 实例.setMap(map)方法调用后会自动调用onAdd方法
    onAdd() {
      // 初始化信息框内容 
      this.initInfo();
      // 将marker内容添加到markerDiv元素上
      if (!this.domBoolean) {
        // 创建div元素，作为自定义覆盖物的容器  
        this.markerDiv.innerHTML = this.markerContent;
      } else {
        this.markerDiv.append(this.markerContent);
      }
      
      
      
      // 将信息框dom添加到div元素上
      this.infoDiv && this.div.append(this.infoDiv);
      // 将自定义的marker添加到div元素上
      this.div.append(this.markerDiv)

      // 将div添加到覆盖物容器中  
      this.getPanes().floatPane.appendChild(this.div);
    }

    draw() {
      const { x, y } = this.getProjection().fromLatLngToDivPixel(this.point);

      this.div.style.left = x - this.size.x / 2 + "px";
      this.div.style.top = y - this.size.y / 2 + "px";
    }

    // 获取marker类的元素
    getMarkerDiv(){
      return this.markerDiv;
    }

    setInfoContent(content:any){
      if(this.isDomInfo){
        this.infoDivCon.remove()
      }else{
        this.infoDiv.innerHTML = ''
        this.isDomInfo = true;
      }
      if(typeof content == 'string'){
        this.infoDiv.innerHTML = content
        this.isDomInfo = false;
      }else{
        this.infoDiv.append(content)
        this.isDomInfo = true;
      }
      this.infoDivCon = content
      
    }

    changeMarkContent(content:any){
      // 将marker内容添加到markerDiv元素上
      if (!this.domBoolean) {
        // 创建div元素，作为自定义覆盖物的容器  
        this.markerDiv.innerHTML = '';
      } else {
        this.markerContent.remove();
      }
      if(typeof content == 'string'){
        this.markerDiv.innerHTML = content
        this.domBoolean = false;
      }else{
        this.markerContent.append(content)
        this.domBoolean = true;
      }
      this.markerContent = content
    }

    // 隐藏信息框
    infoHide(){
      this.infoDiv && (this.infoDiv.style.display = 'none');
    }

    // 展示信息框
    infoShow(){
      
      this.infoDiv && (this.infoDiv.style.display = 'block');
      // if(!this.isInfoCreated){
      //   if(this.isDomInfo){
      //     this.infoDivCon = content
      //   }else{
      //     this.infoDivCon.innerHTML = 
      //   }
      // }
      
      this.isInfoCreated = true
    }
    
    onRemove() {
      if (this.div) {
        this.div.parentNode.removeChild(this.div);
        delete this.div;
      }
    }

    hide() {
      this.div && (this.div.style.visibility = "hidden");
    }

    show() {
      this.div && (this.div.style.visibility = "visible");
    }
  }

  return SquareOverlay
}